<template>
  <!-- 外框 -->
  <view class="content-input"
    :style="{ width: width + 'rpx', border: '1px solid' + borderColor, fontSize: fontSize + 'rpx', borderRadius: borderRadius + 'rpx', color: color }">
    <!-- 光标 -->
    <view v-if="numbers == 6"
      :style="{ 'margin-left': String((Number(width) / 6) / 3.2 + (password.length * (Number(width) / 6))) + 'rpx' }"
      class="show-line">丨</view>

    <view v-else
      :style="{ 'margin-left': String((Number(width) / 4) / 3.2 + (password.length * (Number(width) / 4))) + 'rpx' }"
      class="show-line">丨</view>
    <!-- 输入框 -->
    <input :style="{ width: width + 'rpx', height: Number(width) / 6 + 'rpx' }" v-model="password" focus type="number"
      :maxlength="numbers" class="real-input">

    <template v-for="(item, index) in statusList" :key="index">
      <!-- 占位密码框 -->
      <input
        :style="{ width: Number(width) / 6 + 'rpx', height: Number(width) / 6 + 'rpx', paddingLeft: String((Number(width) / 6) / 2.4) + 'rpx', borderRight: '1px solid' + borderColor }"
        v-if="item.showText && numbers == 6" type="text" maxlength="1" v-model="password[index]" :disabled="true"
        :class="['fake-input', index == 5 ? 'last-input' : '']" />
      <input v-else-if="!item.showText && numbers == 6"
        :style="{ width: Number(width) / 6 + 'rpx', height: Number(width) / 6 + 'rpx', paddingLeft: String((Number(width) / 6) / 2.4) + 'rpx', borderRight: '1px solid' + borderColor }"
        type="password" maxlength="1" v-model="password[index]" :disabled="true"
        :class="['fake-input', index == 5 ? 'last-input' : '']" />

    </template>
    <input v-if="numbers == 4" v-for="i, index in 4"
      :style="{ width: Number(width) / 4 + 'rpx', height: Number(width) / 4 + 'rpx', paddingLeft: String((Number(width) / 4) / 2.4) + 'rpx', borderRight: '1px solid' + borderColor }"
      type="text" maxlength="1" v-model="password[index]" :disabled="true"
      :class="['fake-input', index == 3 ? 'last-input' : '']" />

  </view>
</template>

<script lang="ts" setup>
import { reactive, ref, watch,onMounted } from 'vue';

const props = withDefaults(defineProps<{
  width?: string | number, //宽度
  borderColor?: string | 'none', //边框颜色
  fontSize?: string | number, // 字体大小
  borderRadius?: string | number, // 圆角
  color?: string, // 字体颜色
  numbers?: 6 | 4
}>(), {
  width: '484',
  fontSize: '30',
  borderColor: '#D1D1D1',
  borderRadius: 0,
  color: '#000',
  numbers: 6
})
const password = ref('')

onMounted(() => {
	password.vale = ''
})
const statusList = reactive([{
  showText: true
}, {
  showText: true
}, {
  showText: true
}, {
  showText: true
}, {
  showText: true
}, {
  showText: true
}])
const emits = defineEmits(['finalValue'])

const preIndex = ref(-1)
watch(() => password.value, value => {
  let index = value.length - 1
  if (index >= 0 && preIndex.value < index) {
    preIndex.value = index
    setTimeout(() => {
      statusList[index].showText = false
    }, 500);
  } else if (index > 0 && preIndex.value > index) {
    preIndex.value = index

    statusList[index + 1].showText = true
  }
  if (index == -1) {
    preIndex.value = -1
    setTimeout(() => {
      statusList.forEach(item => item.showText = true)
    });
  }
  if (index + 1 == props.numbers) {
    emits('finalValue', value)
  }
})
</script>

<style lang="scss" scoped>
.content-input {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;

  .show-line {
    position: absolute;
    animation: showline 2s infinite;
  }

  .show-line-hiden {
    display: none;
  }

  @keyframes showline {
    25% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    75% {
      opacity: 0;
    }
  }

  .real-input {
    position: absolute;
    border: 1px solid blue;
    border: 1px solid red;
    z-index: 333;
    opacity: 0;
    top: 0;
    left: 0;
  }

  .fake-input {
    border-right: 1px solid rgba(255, 255, 255, .2);
    overflow: hidden;
  }

  .last-input {
    border-right: none !important;
  }

}
</style>
